// category
import { ref } from 'vue'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
import { findTopCategory } from '@/api/category'

// 如何在setup中取路由参数?
// 导入 useRoute useRoute()使用 -> 实例化route 相当于Vue2. 中的this.$router
function useCategory () {
  const route = useRoute()
  const categoryData = ref({})
  async function loadCategory (id = route.params.id) {
    const res = await findTopCategory(id)
    categoryData.value = res.data.result
  }
  loadCategory()
  // 路由更新前执行的回调, 每次更新都会执行
  // 首次执行的时候,给一个默认参
  onBeforeRouteUpdate((to) => {
    // to: 要去往的新路由对象 to.params.id 获得路由参数
    loadCategory(to.params.id)
  })

  return {
    categoryData
  }
}

export default useCategory
